Vue3打包构建从webpack改为vite

2024-02-29 23:41| 来源: 网络整理| 查看: 265

Vue3打包构建从webpack改为vite 前言package.jsonindex.html~~vue.config.js~~ 文件删掉创建vite.config.ts~~require~~ 无法使用，require是webpack自带的，在vite里用import导入文件批量引入文件vite不支持动态加载文件，解决方案是加上注释新增vite-env.d.ts新增tsconfig.node.json

前言

新创建的vue项目是用webpack创建打包的，想改成vite打包，顺便看看有哪些改变，以下是具体操作的内容。（靠提交记录记的，时间久远，可能有遗漏）

package.json 运行脚本

webpack “scripts”: { “serve”: “vue-cli-service serve”, “build”: “vue-cli-service build”, “lint”: “vue-cli-service lint” } vite “scripts”: { “build”: “vue-tsc --noEmit && vite build”, “dev”: “vite”, “preview”: “vite preview” }

开发依赖减少了很多，因为vite内置了很多依赖，无需手动下载

webpack “devDependencies”: { “@typescript-eslint/eslint-plugin”: “^5.4.0”, “@typescript-eslint/parser”: “^5.4.0”, “@vue/cli-plugin-babel”: “~5.0.0”, “@vue/cli-plugin-eslint”: “~5.0.0”, “@vue/cli-plugin-router”: “~5.0.0”, “@vue/cli-plugin-typescript”: “~5.0.0”, “@vue/cli-service”: “~5.0.0”, “@vue/eslint-config-typescript”: “^9.1.0”, “babel-plugin-import”: “^1.13.5”, “eslint”: “^7.32.0”, “eslint-plugin-vue”: “^8.0.3”, “postcss-pxtorem”: “^6.0.0”, “sass”: “^1.32.7”, “sass-loader”: “^12.0.0”, “typescript”: “~4.5.5”, “unplugin-vue-components”: “^0.20.1”, “unplugin-vue-define-options”: “^0.6.2” } vite “devDependencies”: { “@types/node”: “^12.20.24”, “@vitejs/plugin-vue”: “^3.0.3”, “rollup-plugin-copy”: “^3.4.0”, “typescript”: “^4.6.4”, “unplugin-vue-components”: “^0.22.4”, “vite”: “^3.0.7”, “vue-tsc”: “^0.39.5” }

完整版如下 { "name": "min-demo", "version": "0.0.1", "type": "module", "scripts": { "build": "vue-tsc --noEmit && vite build", "dev": "vite", "preview": "vite preview" }, "dependencies": { "@tinymce/tinymce-vue": "^4.0.7", "amfe-flexible": "^2.2.1", "axios": "^0.27.2", "copy-webpack-plugin": "^11.0.0", "echarts": "^5.3.3", "element-plus": "^2.2.14", "min-comp": "^0.0.4", "mockjs": "^1.1.0", "particles.vue3": "^2.2.3", "pinia": "^2.0.20", "prismjs": "^1.28.0", "sass": "^1.54.5", "sass-loader": "^13.0.2", "three": "^0.143.0", "tsparticles": "^2.2.3", "vant": "^3.6.0", "vite-plugin-dts": "^1.4.1", "vite-plugin-md": "^0.20.2", "vue": "^3.2.37", "vue-router": "^4.1.3" }, "devDependencies": { "@types/node": "^12.20.24", "@vitejs/plugin-vue": "^3.0.3", "rollup-plugin-copy": "^3.4.0", "typescript": "^4.6.4", "unplugin-vue-components": "^0.22.4", "vite": "^3.0.7", "vue-tsc": "^0.39.5" } } index.html index.html的位置需要移至和src同级需要手动引入main.ts 由于BASE_URL是webpack内置的全局环境变量，vite无法使用，vite的环境变量属性存放在importa.env中 vue.config.js 文件删掉创建vite.config.ts //vite.config.ts import { defineConfig } from "vite"; import vue from '@vitejs/plugin-vue'; import Components from 'unplugin-vue-components/vite'; import { VantResolver } from 'unplugin-vue-components/resolvers'; import path from 'path'; export default defineConfig({ resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, plugins: [ vue(), Components({ resolvers: [VantResolver()], }), ], }) require 无法使用，require是webpack自带的，在vite里用import导入文件 //webpack require("../mock"); //vite import "../mock/index"; 批量引入文件 //webpack const files = require.context('.', true, /\.js$/); //vite const files = importa.glob("./*.js"); vite不支持动态加载文件，解决方案是加上注释 //webpack component: () => import(`@/views/${folderUrl}/LayoutView.vue`) //vite component: () => import(/* @vite-ignore */`@/views/${folderUrl}/LayoutView.vue`) 新增vite-env.d.ts declare module '*.vue' { import type { DefineComponent } from 'vue' const component: DefineComponent}, any> export default component } 新增tsconfig.node.json { "compilerOptions": { "composite": true, "module": "ESNext", "moduleResolution": "Node", "allowSyntheticDefaultImports": true }, "include": ["vite.config.ts"] }

git 提交记录可以在项目里查看

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章